<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				border: 10px red solid;
				/*
				W3C 标准，使用隐函数形 Block Formatting Context
				简称 BFC，该属性可以设置打开或者关闭，默认是关闭的。
				开启之后，元素特性如下：
				1、父元素的外边距不会和子元素重叠
				2、开启BFC的元素不会被浮动元素覆盖
				3、开启BFC的元素可以包含浮动的子元素
				
				开启的三种方法：
				1、元素浮动
					- 会导致父元素宽度丢失，不能解决问题。
				2、元素绝对定位
					- 
				3、元素设置为inline-block
					- display: inline-block; 会导致宽度丢失，不推荐。
				4、将元素的overflow设置为一个非visible的值
					- overflow: auto; 这种方法比较好。
				
				推荐方式：overflow: hidden;
				*/
				overflow: hidden;
				/*
				在IE6和IE6以下的浏览器这个方法(overflow: hidden;)无效。
				
				但是有另一个隐含的属性叫做 hasLayout
				该属性的作用和BFC类似，所以在IE6中开启hasLayout
				
				解决方法：
				1、zoom: 1。表示“放大”，放大倍数等于后面的数值。只在IE6支持。
				*/
				zoom: 1;
				
				/*
				最好上面两个都写
				overflow: hidden;
				zoom: 1;				
				*/
			}

			.box2 {
				width: 6.25rem;
				height: 6.25rem;
				background-color: blue;
				float: left;
			}

			.box3 {
				width: 1000px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频3《62.尚硅谷_HTML&CSS基础_解决高度塌陷问题一》 -->
		<div class="box1">
			<div class="box2">
				box2
			</div>
		</div>
		<div class="box3">box3</div>
	</body>
</html>
